<template>
  <footer id="footer-guide">
    <nav class="mui-bar mui-bar-tab">
      <a class="mui-tab-item"
         :class="{'mui-active': item.url === $route.path}"
         @click="goTo(item.url)"
         v-for="(item, index) in footerData"
         :key="index">
        <span :class="['iconfont', 'mui-icon', item.icon]"></span>
        <span class="mui-tab-label">{{ item.name }}</span>
      </a>
    </nav>
  </footer>
</template>

<script>
  export default {
    name: 'footer-guide',
    data () {
      return {
        footerData: [
          {
            'icon': 'icon-index',
            "name": '首页',
            "url": '/index'
          },
          {
            'icon': 'icon-category',
            "name": '分类',
            "url": '/categories'
          },
          {
            'icon': 'icon-cart',
            "name": '购物车',
            "url": '/shopcart'
          },
          {
            'icon': 'icon-Home_icon_geren',
            "name": '我的',
            "url": '/profile'
          }
        ],
      }
    },
    methods: {
      goTo (path) {
        this.$router.push(path)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/mixins.styl";
  #footer-guide
    top-border-1px(#cccccc)
    size(100%, 50px)
    bg(#fff)
    position fixed
    left 0
    right 0
    bottom 0
    z-index 100
    .mui-active
      color(#f23030)
    .mui-icon
      fz(16px)
  </style>
